[#ftl]
[@define "agile.MetadataSourceEditorPane" "MetadataEditorPane" "MetadataEditorPane=agile.MetadataEditorPane,Select=dijit/form/Select,CheckBox=dijit/form/CheckBox,Button=dijit/form/Button"]
  	category:""
	,title:"Source"
	[#assign templateString][#compress]
	<div style="width:100%">
		<table>
			<tr>
			<td><b>Source Type</b></td>
			<td><select class="agileSourceType" data-dojo-type='dijit/form/Select' style="width:120px">
				<option value='dojo'>html</option>
				[#if applicationMode = "DEV"]
				<option value='agile'>prototype</option>
				[/#if]
				</select>
			</td>
			<td><b>Include Children</b></td><td><span class="agileCascade" data-dojo-type="dijit/form/CheckBox"></span></td>
			<td><button class="agileRefreshButton" data-dojo-type="dijit/form/Button" type="button">Refresh</button></td>
			</tr>			
		</table>		
		<textarea  class="agileSourcePane editorContainer" cols="40" rows="10" style="width:96%;height:86%" readonly></textarea>
	</div>[/#compress]
	[/#assign]		
	,templateString:"${templateString?js_string}"	
	,constructor:function(){		
//		agile.requireX("dijit.form.Select");
//		agile.requireX("dijit.form.CheckBox");
//		agile.requireX("dijit.form.Button");
	}
	,postCreate:function(){
//		this.domNode.innerHTML = this.templateString;
//    	parser.parse(this.domNode);    	
    	this.inherited(arguments);
    	
    	this.agileSourceType = registry.byNode(query(".agileSourceType",this.domNode)[0]);
    	this.agileCascade = registry.byNode(query(".agileCascade",this.domNode)[0]);
    	this.agileRefreshButton = registry.byNode(query(".agileRefreshButton",this.domNode)[0]);
    	this.agileSourcePane = query(".agileSourcePane",this.domNode)[0];
//    	console.log("@@@@@@this.agileRefreshButton=",this.agileRefreshButton);
    	this.agileRefreshButton.on("click",lang.hitch(this,function(event){			
		 	if(this.currentWidget != null){			 		
		 		this.agileSourcePane.value = this.currentWidget.toHtml({cascade:this.agileCascade.checked,indentCount:0,sourceType:this.agileSourceType.get("value")});
		 	}
		}));	
//    	//console.log(this.declaredClass,"agileSourceType:",this.agileSourceType);
    	on(this.agileCascade,"change",lang.hitch(this,function(value){
    		if(this.currentWidget != null){			 		
		 		this.agileSourcePane.value = this.currentWidget.toHtml({cascade:this.agileCascade.checked,indentCount:0,sourceType:this.agileSourceType.get("value")});
		 	}
    	}));
    	this.agileSourceType.on("change",lang.hitch(this,function(value){
    		if(this.currentWidget != null){			 		
		 		this.agileSourcePane.value = this.currentWidget.toHtml({cascade:this.agileCascade.checked,indentCount:0,sourceType:this.agileSourceType.get("value")});
		 	}
    	}));
	}
 
	,onWidgetSelected:function(widget){	
		this.currentWidget = widget;
		if(widget != null){
	 		this.agileSourcePane.value = widget.toHtml({cascade:this.agileCascade.checked,indentCount:0,sourceType:this.agileSourceType.get("value")});
	 	}else{
	 		this.agileSourcePane.value = '';
		}
	}
[/@] 